<template>
  <div class="risk-trends box-bg">
    <TitleLable label="风险趋势"> </TitleLable>
    <div class="head">
      <el-row type="flex" justify="space-between" align="middle" class="title">
        <div>风险企业共计 <span class="yellow">13</span> 家</div>
        <el-row
          type="flex"
          align="middle"
          class="pointer"
          @click.native="handleDetail"
        >
          <div>风险数量</div>
          <i class="down"></i>
        </el-row>
      </el-row>
    </div>
    <div class="risk-trends-chart">
      <div class="chart" ref="riskTrendsChart"></div>
      <div class="num blue">
        <div v-for="(item, index) in num" :key="index">{{ item }}</div>
      </div>
    </div>
    <!-- 风险详情 -->
    <el-dialog
      append-to-body
      :visible.sync="show"
      width="1260px"
      custom-class="cockpit-container cockpit-dialog financial-table-modal"
    >
      <template #title>
        <div>
          <el-row type="flex" align="middle">
            <div class="title">
              <span>风险详情</span>
            </div>
          </el-row>
          <div class="hit blue underline pointer" @click="goTo('风险概览')">
            查看项目详情
          </div>
        </div>
      </template>
      <TabelModal />
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TitleLable from "../TitleLable/index.vue";
import TabelModal from "./TabelModal.vue";

export default {
  name: "RiskTrends",
  components: { TitleLable, TabelModal },
  data() {
    return {
      show: false,
      myChart: null,
      num: [35, 28, 21, 14, 7],
      company: ["公司5", "公司4", "公司3", "公司2", "公司1"],
      list: [
        {
          name: "债务风险",
          value: [1, 2, 3, 4, 5],
          color: "#159AFF",
        },
        {
          name: "资产质量",
          value: [1, 2, 3, 4, 5],
          color: "#66E1DF",
        },
        {
          name: "主业竞争力",
          value: [1, 2, 3, 4, 5],
          color: "#AF8FFF",
        },
        {
          name: "企业发展力",
          value: [1, 2, 3, 4, 5],
          color: "#39b54a",
        },
        {
          name: "价值贡献力",
          value: [1, 2, 3, 4, 5],
          color: "#a5673f",
        },
        {
          name: "重大风险事项",
          value: [1, 2, 3, 4, 5],
          color: "#f37b1d",
        },
        {
          name: "重大舆情风险",
          value: [1, 2, 3, 4, 5],
          color: "#110bf4",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const list = this.list;
      const series = list.map((i) => {
        return {
          name: i.name,
          type: "bar",
          stack: "samesign",
          data: i.value,
          barWidth: 7,
          label: {
            show: true,
            position: "inside",
          },
          showBackground: true,
          backgroundStyle: {
            borderWidth: 5,
            borderColor: "#1C3862",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: i.color },
              { offset: 1, color: "rgba(21,154,255,0.1)" },
            ]),
          },
        };
      });
      const legendData = list.map((i) => ({
        name: i.name,
        itemStyle: { color: i.color },
      }));
      const option = {
        grid: { left: 50, right: 20, bottom: 10, top: 55 },
        legend: {
          itemHeight: 6,
          itemWidth: 6,
          icon: "rect",
          top: "2%",
          textStyle: { color: "#c4ccd7" },
          data: legendData,
        },
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: { type: "dashed", color: " rgba(108,128,151,0.3)" },
          },
          axisTick: { show: false },
        },
        yAxis: [
          {
            type: "category",
            axisLabel: { color: "#c4ccd7" },
            axisLine: { lineStyle: { color: "#6C8097" } },
            axisTick: { show: false },
            splitLine: { show: false },
            data: this.company,
          },
        ],
        series,
      };
      this.myChart = echarts.init(this.$refs.riskTrendsChart);
      this.myChart.setOption(option);
    },
    handleDetail() {
      this.show = true;
      console.log("ddsdd");
    },
    goTo(path) {
      this.$message("进入平台：" + path);
    },
  },
};
</script>

<style lang="scss" scoped>
.risk-trends {
  width: 500px;
  height: 371px;
  color: #ffffff;
  font-weight: 500;
  .head {
    position: relative;
    width: 430px;
    height: 68px;
    margin: 8px auto 0;
    background: url("~@/assets/cockpit/risk_rend_bg.png") no-repeat center /
      contain;
    .title {
      padding-top: 26px;
      padding-left: 24px;
    }
    .down {
      display: flex;
      width: 24px;
      height: 24px;
      margin-left: 8px;
      background: url("~@/assets/cockpit/risk_rends_filter.png") no-repeat
        center / contain;
    }
  }
  .risk-trends-chart {
    position: relative;
    width: 460px;
    height: 250px;
    margin: 0 auto;
    .chart {
      width: 100%;
      height: 100%;
    }
    .num {
      position: absolute;
      right: 10px;
      bottom: 21px;
      z-index: 10;
      > div {
        margin-top: 21px;
      }
    }
  }
}
</style>
